<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>水平垂直居中</title>
        <style>
            .parent1 {
                width: 300px;
                height: 300px;
                background: brown;
                margin-bottom: 32px;
                position: relative;
                line-height: 300px;
            }

            .child1 {
                width: 150px;
                height: 150px;
                background: green;
                text-align: center;
                line-height: 150px;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
            }

            .parent2 {
                width: 300px;
                height: 300px;
                background: brown;
                margin-bottom: 32px;
                position: relative;
            }

            .child2 {
                width: 150px;
                height: 150px;
                background: green;
                text-align: center;
                line-height: 150px;
                position: absolute;
                left: 50%;
                top: 50%;
                /*自身宽度的一半*/
                margin-left: -75px;
                /*自身高度的一半*/
                margin-top: -75px;
            }

            .parent3 {
                width: 300px;
                height: 300px;
                background: brown;
                margin-bottom: 32px;
                position: relative;
            }
            .child3 {
                width: 150px;
                height: 150px;
                background: green;
                text-align: center;
                line-height: 150px;
                position: absolute;
                left: 50%;
                top: 50%;
                /*自身宽高的一半*/
                transform: translate(-50%, -50%);
            }

            .parent4 {
                width: 300px;
                height: 300px;
                background: brown;
                margin-bottom: 32px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .child4 {
                width: 150px;
                height: 150px;
                background: green;
                text-align: center;
                line-height: 150px;
            }
        </style>
    </head>
    <body>
        <div class="parent1">
            <div class="child1">第一种</div>
        </div>

        <div class="parent2">
            <div class="child2">第二种</div>
        </div>

        <div class="parent3">
            <div class="child3">第三种</div>
        </div>

        <div class="parent4">
            <div class="child4">第四种</div>
        </div>
    </body>
</html>

<style>
    .parent4 {
        width: 300px;
        height: 300px;
        background: brown;
        margin-bottom: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .child4 {
        width: 150px;
        height: 150px;
        background: green;
        text-align: center;
        line-height: 150px;
    }
</style>
